<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>查询条件</span></el-col>
      </el-row>

      <el-form :inline="true" :model="listQuery" style="padding: 10px 20px 0">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">员工编号</div>
              <el-autocomplete
                clearable
                v-model="listQuery.name"
                :fetch-suggestions="getUserList"
                placeholder="请输入内容"
                @select="setSales"
              ></el-autocomplete>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 23px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">
              查询
            </div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">
              重置
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="yt-data-list">
      <div class="yt-list-title">
        <span>免记成本白名单</span>
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <!--新增-->
          <div class="yt-btn yt-btn-ys" type="primary" @click="handleAdd">
            新增
          </div>
          <!--删除-->
          <div class="yt-btn yt-ml8" type="danger" @click="handleDelete">
            删除
          </div>
          <div class="yt-btn yt-ml8" type="danger" @click="handleUpdate">
            保存
          </div>
        </div>

        <el-table
          :data="list"
          border
          style="width: 100%;"
          class="yt-table"
          @selection-change="handleSelectionChange"
          max-height="600"
        >
          <el-table-column type="selection" align="center" class-name="pd" prop="id" width="60"/>
          <el-table-column type="index" align="center" label="序号"/>
          <el-table-column align="center" label="员工编号" prop="name" class-name="pd"/>
          <el-table-column align="center" label="姓名" prop="name" class-name="bg"/>
          <el-table-column align="center" label="英文名称" prop="name" class-name="bg"/>
          <el-table-column align="center" label="部门编码" prop="name" class-name="bg"/>
          <el-table-column align="center" label="部门名称" prop="name" class-name="bg"/>
          <el-table-column align="center" label="BU" prop="name" class-name="bg"/>
          <el-table-column align="center" label="BG" prop="name" class-name="bg"/>
          <el-table-column align="center" label="最后修改人" prop="name" class-name="bg"/>
          <el-table-column align="center" label="最后修改时间" prop="name" class-name="bg"/>
        </el-table>
        <div class="pagination-container" style="text-align: center">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[10, 20, 30, 50, 100, 200]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <el-dialog
      title="新增"
      :visible.sync="dictDialogVisible"
      class="yt-dialogForm-box"
    >
      <el-form
        :rules="rules"
        ref="rulesForm"
        :inline="true"
        :model="dialogForm"
        label-width="100px"
      >
        <el-form-item label="员工编号" prop="sales">
          <el-autocomplete
            clearable
            v-model="dialogForm.sales"
            :fetch-suggestions="getUserList"
            placeholder="请输入员工编号"
            @select="setSales"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('rulesForm')">取 消</el-button>
        <el-button type="primary" @click="editorDict('rulesForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getUserInfoByName } from '@/api/dict/dictValue/index';

  export default {
    name: 'notAccount',
    data() {
      const validateSales = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择Sales'));
        } else {
          if (this.userList.findIndex(item => this.dialogForm.sales === item.ename) < 0) {
            this.dialogForm.sales = ''
            callback(new Error('请选择Sales'));
          } else {
            callback()
          }
        }
      };
      return {
        listQuery: {
          page: 1,
          limit: 10,
          name: '',
          id: ''
        },
        total: 0,
        userList: [],
        list: [{ name: 'zh-cn00001' }, { name: 'zh-cn00001' }, { name: 'zh-cn00001' }],
        selectionList: [],
        dictDialogVisible: false,
        rules: {
          sales: [
            {
              required: true,
              validator: validateSales
            }
          ]
        },
        dialogForm: { sales: '' }
      };
    },
    methods: {
      getList() {
        this.listLoading = true;
        // getList(this.listQuery).then(response => {
        //   this.list = response.data.data.rows;
        //   this.listLoading = false;
        // });
      },
      setSales(item) {
        this.listQuery.id = item.id;
      },
      handleUpdate() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: '失败',
            message: '请选择',
            type: 'warning'
          });
          return;
        }
        putObj(this.selectionList).then(() => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000
          });
          this.getList();
        });
      },
      handleAdd() {
        console.log('新增')
        this.dictDialogVisible = true;
        this.dialogForm = { sales: '' }
      },
      handleDelete() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: '失败',
            message: '请选择',
            type: 'warning'
          });
          return;
        }
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // const list = this.selectionList.map(item => item.id)
          // deleteList(list).then(() => {
          //   this.$notify({
          //     title: '成功',
          //     message: '删除成功',
          //     type: 'success',
          //     duration: 2000
          //   });
          //   this.getList();
          // });
        });
      },
      getUserList(queryString, cb) {
        // 获取员工编号
        getUserInfoByName({ username: queryString }).then(res => {
          this.userList = res.data.rows;
          for (let i = 0; i < this.userList.length; i++) {
            this.userList[i].value = this.userList[i].ename;
          }
          cb(this.userList);
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = { page: 1, limit: 10, name: '' };
        this.getList();
      },
      resetForm(formName) {
        this.dictDialogVisible = false;
        this.dialogForm = {};
        this.$refs[formName].resetFields();
      },
      editorDict(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            // add(this.dialogForm).then(res => {
            //   this.$notify({
            //     title: res.status === 200 ? '编辑成功' : '成功',
            //     message: res.status === 201 ? '编辑失败:' + res.data : '成功',
            //     type: res.status === 200 ? 'success' : 'warning'
            //   });
            //   if (res.status === 200) {
            //     this.resetForm('rulesForm');
            //     this.dictDialogVisible = false;
            //     this.getList();
            //   }
            // });
          } else {
            return false;
          }
        });
      }
    },
    created() {
      this.getList();
    }
  };
</script>
<style scoped>
</style>
